<script setup>
import * as echarts from 'echarts';
import {ref, onMounted} from 'vue'
import {request} from "@/util/request.js";
import {useUserStore} from "@/store/user.js";
import {formatterDate} from "@/util/utils.js";

const sales = ref('')
const container = ref('')
const volume = ref('')
const interview = ref('')
const online = ref('')

const userStore = useUserStore()

// 绘制图表
function initCharts() {
    getSaleroom()
    getSales()
}

const config = {
    headers: {
        'Authorization': userStore.token
    }
}

function getSales() {
    request.get('/statistics/sales', config).then(res => {
        let data = formatSale(res.data)
        // 基于准备好的dom，初始化echarts实例
        const salesChart = echarts.init(sales.value);
        // 绘制图表
        salesChart.setOption({
            title: {
                text: '销售统计'
            },
            tooltip: {},
            xAxis: {
                data: data.category
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: data.result
                }
            ]
        });
        const onlineChart = echarts.init(online.value)
        onlineChart.setOption({
            title: {
                text: '商品销售额统计'
            },
            xAxis: {
                type: 'category',
                data: data.category
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.saleroom,
                    type: 'line'
                }
            ]
        })
    })
}

function getSaleroom() {
    request.get('/statistics/saleroom', config).then(res => {
        let data = formatSaleRoom(res.data)
        const volumeChart = echarts.init(volume.value)
        volumeChart.setOption({
            title: {
                text: '单日销售额统计'
            },
            xAxis: {
                type: 'category',
                data: data.date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.saleroom,
                    type: 'line'
                }
            ]
        })

        const interviewChart = echarts.init(interview.value)
        interviewChart.setOption({
            title: {
                text: '商品销售数量统计'
            },
            xAxis: {
                type: 'category',
                data: data.date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.sum,
                    type: 'line'
                }
            ]
        })
    })
}



function formatSale(data) {
    const category = data.map(item => item.name);
    const result = data.map(item => item.sum);
    const saleroom = data.map(item => item.saleroom)
    return {
        category,
        result,
        saleroom
    };
}

function formatSaleRoom(data) {
    const date = data.map(item => formatterDate(new Date(item.date)));
    const saleroom = data.map(item => item.saleroom);
    const sum = data.map(item => item.sum)
    return {
        date,
        saleroom,
        sum
    };
}

onMounted(() => {
    container.value.style.height = window.innerHeight - 120 + "px"
    initCharts()
})

</script>

<template>
    <div class="container" ref="container">
        <div ref="sales" class="main"></div>
        <div ref="interview" class="main"></div>
        <div ref="volume" class="main"></div>
        <div ref="online" class="main"></div>
    </div>
</template>

<style scoped>
.container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.main {
    height: 50%;
    width: 50%;
}
</style>